<template>
	<!-- 管理页面 -->
	<a-card :bordered="false">
		<!-- 顶部筛选 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" labelAlign="right">
				<a-row :gutter="48">
					<a-col :md="8" :sm="12">
						<a-form-item label="生产单号">
							<a-input v-model="queryParam.orderNumber" placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="12">
						<a-form-item label="入库完成时间">
							<a-range-picker style="width:100%" v-model="queryParam.timeList" format="YYYY-MM-DD" />
						</a-form-item>
					</a-col>
					<a-col :md="24" :sm="24">
						<a-form-item label="状 态">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.status">
								<a-radio-button value="">全部</a-radio-button>
								<a-radio-button value="1">生产中</a-radio-button>
								<a-radio-button value="2">入库中</a-radio-button>
								<a-radio-button value="3">未核算</a-radio-button>
								<a-radio-button value="4">已核算</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>

					<a-col :md="24" :sm="24">
						<a-form-item label="归属公司">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdCompany">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in $util.getOrgList($businessEnum.ORG_TYPE_ENUM.COMPANY.id)" :key="id">
									{{ name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="24">
						<span class="table-page-search-submitButtons">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button type=""
								@click="() => { queryParam = { orgIdCompany: '', status: '' }; $refs.table.refresh(true) }">重置</a-button>
							<a-button type="danger" @click="checkSuccess()">核算完成</a-button>
							<Export text="导出" type="danger" title="生产成本管理" url="/emsOrder/productionCostsExport" :obj="exportQuery" />
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 表格 -->
		<div style="display: flex;align-items:flex-end;justify-content: space-between;">
			<div class="selectText">
				<span>当前表格已选中 <span class="bold">{{ selectedRows.length }}</span> 项</span>
				<span style="cursor: pointer;" @click="clearSelect">清除</span>
			</div>
		</div>
		<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
			:rowKey="(record) => record.orderId"
			:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
			<!-- <span slot="selectBtn" slot-scope="text, record">
        <div
					class="select-btn"
					:class="{
						'select-btn__selected': selectedRows.some(item=>item.orderId==record.orderId),
						'select-btn__disabled': record.status!=3,
					}"
					@click="record.status!=3 ? '' : handleClickSelectBtn(record)"
				></div>
      </span> -->
			<!-- 详情 -->
			<span slot="status" slot-scope="text, record">
				<a-tag style="width:70px; text-align: center;" :color="text == 1 ? 'blue' :
					text == 2 ? 'orange' :
						text == 3 ? 'green' :
							text == 4 ? 'pink' :
								''">
					{{
						text == 1 ? '生产中' :
							text == 2 ? '入库中' :
								text == 3 ? '未核算' :
									text == 4 ? '已核算' :
										''
					}}
				</a-tag>
			</span>
			<!-- 操作 -->
			<span slot="action" slot-scope="text, record">
				<a @click="$refs.form1.init(record)">详情</a>
				<a-divider type="vertical" />
				<a
					@click="$refs.form2.init(record.orderId, record.isOverseasStore == 'Y' ? $businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id : $businessEnum.MATERIAL_TYPE_ENUM.product.id)">产品列表</a>
				<a-divider type="vertical" />
				<a
					@click="$refs.form3.init(record.orderId, record.isOverseasStore == 'Y' ? $businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id : $businessEnum.MATERIAL_TYPE_ENUM.product.id)">领料记录</a>
			</span>
		</s-table>
		<!--  新增编辑详情弹框  -->
		<addAndEdit ref="addAndEdit" />
		<form1 ref="form1" />
		<form2 ref="form2" />
		<form3 ref="form3" />
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page, checkApi } from '@/api/modular/main/productionCost'
import addAndEdit from './addAndEdit'
import form1 from './form1'
import form2 from './form2'
import form3 from './form3'



export default {
	components: {
		STable,
		addAndEdit,
		form1,
		form2,
		form3
	},
	computed: {
		exportQuery() {
			let query = {
				...this.queryParam,
				startTime: this.appendTime(this.queryParam.timeList)[0],
				endTime: this.appendTime(this.queryParam.timeList)[1],
			}
			delete query.timeList
			return query
		}
	},
	data() {
		return {
			queryParam: {},  // 查询参数
			// selectedRows: [],
			columns: [
				{
					title: '',
					width: '80px',
					scopedSlots: { customRender: 'selectBtn' }
				},
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '生产单号',
					dataIndex: 'orderNumber'
				},
				{
					title: '归属公司',
					dataIndex: 'orgName'
				},
				{
					title: '状态',
					dataIndex: 'status',
					scopedSlots: { customRender: 'status' }
				},
				{
					title: '生产成本',
					dataIndex: 'costTotalPrice'
				},
				{
					title: '创建时间',
					dataIndex: 'createTime'
				},
				{
					title: '生产完成时间',
					dataIndex: 'completedTime',
					customRender: (text, record, index) => {
						return text ? text : '--'
					}
				},
				{
					title: '入库完成时间',
					dataIndex: 'inStoreCompletedTime',
					customRender: (text, record, index) => {
						return text ? text : '--'
					}
				},

				{
					title: '操作',
					align: 'center',
					width: '250px',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				let query = {
					...this.queryParam,
					...parameter,
					// orderType: this.orderType,
					startTime: this.appendTime(this.queryParam.timeList)[0],
					endTime: this.appendTime(this.queryParam.timeList)[1],
				}
				delete query.timeList
				return page(query).then((res) => {
					return res.data
				})
			},
			scheduleProductionVisible: false,
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
		}
	},
	methods: {
		handleOk() {
			this.$refs.table.refresh()
		},
		// 表格选择按钮点击事件
		handleClickSelectBtn(record) {
			let i = this.selectedRows.findIndex(item => item.orderId === record.orderId)
			if (i == -1) {
				this.selectedRows.push(record)
			} else {
				this.selectedRows.splice(i, 1)
			}
		},
		// 清除选中
		clearSelect() {
			this.$nextTick(() => {
				this.selectedRows = []
				this.selectedRowKeys = []
			})
			this.$refs.table.clearSelected();
		},
		// 核算完成点击事件
		checkSuccess() {
			if (this.selectedRows.length == 0) {
				return this.$message.warning('请选择要核算的订单')
			}
			let index = this.selectedRows.filter(val => val.status != 3);
			if (index.length > 0) {
				this.$message.error('当前存在不可进行核算的数据，请重新选择!')
				return
			}
			// return
			let query = {
				orderIds: this.selectedRows.map(item => item.orderId)
			}
			checkApi(query).then(res => {
				if (res.code == 200) {
					this.$message.success('核算成功')
					this.handleOk()
					this.clearSelect()
				}
			})
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
